<template>
    <div>
        <!-- 搜索页 -->
        <!-- 头部 -->
        <div class="search">
            <input @keyup.enter="search" @input="input" ref="inp" type="text" placeholder="请输入拍品名称" v-model="value">
            <!-- 放大镜图标 -->
            <div class="icon" @click="search">
                <svg t="1649000240089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2228" width="18" height="18"><path d="M948.032 902.784l-206.976-206.976C797.696 628.928 832 542.528 832 448c0-212.064-171.936-384-384-384S64 235.936 64 448s171.936 384 384 384c94.528 0 180.928-34.304 247.808-90.912l206.976 206.976c14.016 14.016 35.488 15.232 48 2.72C963.264 938.272 962.048 916.8 948.032 902.784zM448 768C271.264 768 128 624.736 128 448S271.264 128 448 128s320 143.264 320 320S624.736 768 448 768z" p-id="2229" fill="#d3d3d3"></path></svg>
            </div>
            <!-- 清除图标 -->
            <div class="clear" @click="value=''">
                <svg t="1649509275755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2408" data-spm-anchor-id="a313x.7781069.0.i5" width="20" height="20"><path d="M519.656727 472.459636l-160.512-160.488727a36.584727 36.584727 0 1 0-51.712 51.712l160.488728 160.512-160.488728 160.512a36.584727 36.584727 0 1 0 51.712 51.712l160.512-160.512 160.488728 160.512a36.584727 36.584727 0 1 0 51.735272-51.712l-160.512-160.512 160.512-160.512a36.584727 36.584727 0 1 0-51.735272-51.712L519.68 472.436364zM512 1024C229.236364 1024 0 794.763636 0 512S229.236364 0 512 0s512 229.236364 512 512-229.236364 512-512 512z" p-id="2409" data-spm-anchor-id="a313x.7781069.0.i4" class="" fill="#e6e6e6"></path></svg>
            </div>
            <div @click="cancel" class="cancel">取消</div>
        </div>
        <!-- 拍品 -->
        <div class="productlist">
            <div class="count">本次搜索到了{{count}}个结果</div>
                <van-list v-model="loading" @load="loadMore" :immediate-check="true" :finished="finished" offset="10">
                    <search-item v-for="item in productList" :key="item.pid" :product="item"/>
                    <van-divider v-show="show">我是有底线的 ~ </van-divider>
                </van-list>
            </div>
        <!-- 拍品列表为空显示 -->
        <div class="null" v-show="!count">
            <img src="/img/Search.jpg" >
            <div>搜索LOT号、拍品名称、作者、年代</div>
        </div>
        <!-- 回到顶部 -->
        <img class="backtop" @click="backtop" v-show="productList.length" src="/img/backtop.png">
        <!-- 动态实时搜索显示 -->
        <div class="moveShow" v-show="moveShow">
            <div v-for="item,i in result" :key="i" @click="tap(item.title)" v-html="item.title"></div>
        </div>
    </div>
</template>

<script>
import SearchItem from '@/components/SearchItem.vue'
    export default {
  components: { SearchItem },
        data() {
            return {
                value: '',
                productList:[], //存放拍品数据
                count:0, //搜索的数量
                loading:false,
                finished:true,
                pno:1, //保存当前页
                show:false,
                result:[], //实时搜索
                reg:'', //根据搜索框的值生成正则表达式
                moveShow:false //控制实时搜索的显示隐藏
            }
        },
        methods:{
            loadData(pno){
                const url = `v4/index/search?kw=${this.value}&pno=${pno}`
                return new Promise((resolve,reject)=>{
                    this.axios.get(url)
                    .then(res => resolve(res.data))
                    .catch(err => reject(err))
                })
            },
            // 搜索框的值发生变化会触发
            input(){
                this.moveShow=true
                this.reg = new RegExp(this.value)
                const url=`search?title=${this.value}`
                this.axios.get(url)
                .then(res => {
                    this.result = res.data.result
                    this.result.forEach(v => {
                        v.title=v.title.replace(this.reg,`<span style="color:red">${v.title.match(this.reg)}</span>`)
                    })
                })
            },
            // 当点击其中搜索建议中的某一项时触发
            tap(item){
                let reg1=new RegExp('<span style="color:red">')
                let reg2=new RegExp('</span>')
                item=item.replace(reg1,'')
                item=item.replace(reg2,'')
                this.value=item
                this.moveShow=false
                // 加载对应点击项的商品
                this.loadData(1).then(res => {
                    this.productList=res.list
                    this.count=res.count
                })
            },
            loadMore(){
                this.pno++
                this.loadData(this.pno).then(res => {
                    this.productList.push(...res.list)
                    this.loading=false
                    if(res.pno == res.pageCount){
                        this.finished=true
                        this.show=true
                    }
                })
            },
            // 搜索放大镜触发
            search(){
                this.moveShow=false
                this.finished=false
                this.show=false
                this.loading=true
                this.pno=1
                this.productList=[]
                this.loadData(1).then(res => {
                   this.productList = res.list
                   this.count=res.count
                   this.pno=res.pno
                   this.loading=false
                   if(res.list.length==0) {
                       this.finished=true
                   }
                   if(res.pno == res.pageCount){
                       this.finished=true
                       this.show=true
                   }
                })
            },
            // 取消按钮触发
            cancel(){
                this.show=false
                this.count=0
                this.value=''
                this.productList=[]
                this.$router.push('/home/index')
            },
            backtop(){
                document.documentElement.scrollTop=document.body.scrollTop=0
            }
        },
        mounted(){
            this.$refs.inp.focus()
            this.show=false
        },
        activated(){
            this.$refs.inp.focus()
            this.show=false
        },
    }
</script>

<style lang="scss" scoped>
.search {
    display: flex;
    align-items: center;
    left: 0;
    padding: 0.615em 0.315em;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    z-index: 3;
    input {
      flex: 1;
      border-radius: 50px;
      font-size: .9em;
      padding: .5em 2.13em;
      padding-left: 2.3em;
      background-color: #f5f5f5;
      outline: none;
      border: none;
    }
    // 放大镜图标
    >.icon {
      position: absolute;
      top: 0.95em;
      left: .915em;
    }
    // 取消
    >.cancel {
        padding-left: 0.315em;
    }
    // 清除图标
    >.clear {
        position: absolute;
        right: 3.5em;
        top: 1em;
    }
  }
//   没有拍品时显示
  .null {
      display: flex;
      margin-top: 45%;
      flex-direction: column;
      align-items: center;
      img {
          max-width: 10em;
      }
      >div {
          padding-top: 0.615em;
          color: #e0e7e6;
      }
  }
  .productlist {
      margin-top: 3.19em;
      margin-left: 0.615em;
      >.count {
          padding-bottom: 0.615em;
          font-size: .9em;
      }
  }
  .backtop {
      position: fixed;
      bottom: 2.19em;
      right: 0.615em;
  }
  .moveShow {
      position: fixed;
      top: 2.8em;
      left: 0;
      right: 0;
      >div {
          background-color: #fff;
          padding: 0.615em;
          font-size: .9em;
          border-bottom: 1px solid #efefef;
      }
  }
</style>